<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../imgs/favicon.ico" type="image/x-icon">
    <title>任务2：HTML&amp;CSS</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <div class="top-nav-bar">
    		<a href="#" target="_blank"><img src="../imgs/placeholder.png" title="logo" alt="logo"></a>
    		<ul class="top-nav">
    			<li><a href="javascript:;">导航链接一</a></li>
    			<li><a href="javascript:;">导航链接二</a></li>
    			<li><a href="javascript:;">导航链接三</a></li>
    			<li><a href="javascript:;">导航链接四</a></li>
    		</ul>
    	</div>
    </header>

    <article>
        <h2>文章一级标题</h2>
        <h2>文章二级标题</h2>
        <h3>文章作者 文章发表时间</h3>
        <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br>换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
        <img src="../imgs/placeholder.png" alt="占位图" title="占位图">
        <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br>换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com" target="_blank">这里有个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
    </article>

    <article>
        <h2>另一篇文章一级标题</h2>
        <h2>文章二级标题</h2>
        <h3>文章作者 文章发表时间</h3>
        <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br>换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
        <img src="../imgs/placeholder.png" alt="占位图" title="占位图">
        <ul>
            <li>列表项目1</li>
            <li>列表项目2</li>
            <li>列表项目3</li>
        </ul>
    </article>

    <article>
        <h2>图片</h2>
        <dl>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
            <dt>好看的图片</dt>
            <dd><img src="../imgs/placeholder.png" alt="占位图" title="占位图"></dd>
        </dl>
    </article>

    <article>
        <h2>最后一篇文章一级标题</h2>
        <h2>文章二级标题</h2>
        <h3>文章作者 文章发表时间</h3>
        <ol>
            <li>排名1</li>
            <li>排名2</li>
            <li>排名3</li>
        </ol>
        <p>下面是一个表格，给表格加了一个border="1"好让你看出是一个表格</p>
        <table border="1">
            <tr>
                <th>表头</th>
        		<th>表头</th>
        		<th>表头</th>
            </tr>
            <tr>
                <td>表内容单元格</td>
        		<td>表内容单元格</td>
        		<td><a href="javascript:;">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
        		<td>表内容单元格</td>
        		<td><a href="javascript:;">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
        		<td>表内容单元格</td>
        		<td><a href="javascript:;">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
        		<td>表内容单元格</td>
        		<td><a href="javascript:;">操作</a></td>
            </tr>
            <tr>
                <td>总计</td>
                <td colspan="2">1000</td>
            </tr>
        </table>
    </article>

    <aside class="registration">
        <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
        <h2>侧栏注册窗口标题</h2>
        <form method="post" action="javascript:;">
            <div class="a-table-row">
            	<div>
                    <label for="email">请输入邮箱地址：</label>
                </div>
                <div>
                    <input id="email" type="email" placeholder="user@domain.com" name="email">
                </div>
            </div>

            <div class="a-table-row">
                <div></div>
                <div class="notation">邮箱地址请按要求格式输入</div>
            </div>

            <div class="a-table-row">
            	<div>
                    <label for="password">请输入密码：</label>
                </div>
                <div>
                    <input id="password" type="password" placeholder="请最少输入 6 个字符" name="password">
                </div>
            </div>

            <div class="a-table-row">
                <div>
                    <label for="repeat-password">请重复输入密码：</label>
                </div>
                <div>
                    <input id="repeat-password" type="password" placeholder="repeat password" name="repeat-password">
                </div>
            </div>

            <div class="a-table-row">
                <div></div>
                <div class="notation">密码请为 6-16 位英文数字</div>
            </div>

            <div class="a-table-row">
            	<div>性别：</div>
                <div>
                    <input type="radio" value="男" name="gender" checked>
                    <label for="man">男</label>
                    <input type="radio" value="女" name="gender">
                    <label for="woman">女</label>
                </div>
            </div>

            <div class="a-table-row">
                <div>
                    <label for="city">城市：</label>
                </div>
                <div>
                    <select id="city" name="city">
                        <option value="Beijing" label="北京" selected>北京</option>
                        <option value="Shanghai" label="上海">上海</option>
                        <option value="Guangzhou" label="广州">广州</option>
                        <option value="Shenzhen" label="深圳">深圳</option>
                        <option value="Hangzhou" label="杭州">杭州</option>
                    </select>
                </div>
            </div>

            <div class="a-table-row">
            	<div>爱好：</div>
                <div>
                    <input id="sport" type="checkbox" name="sport">
                    <label for="sport">运动</label>
                    <input id="art" type="checkbox" name="art">
                    <label for="art">艺术</label>
                    <input id="science" type="checkbox" name="science">
                    <label for="science">科学</label>
                </div>
            </div>

            <div class="a-table-row">
            	<div>个人描述：</div>
                <div>
                    <textarea name="self-description" wrap="hard" title="self-description" placeholder="这是一个多行输入框，输入您的个人描述" cols="40" rows="5" ></textarea>
                </div>
            </div>

            <div class="submit-button">
                <input type="submit" value="确认提交">
            </div>
        </form>
    </aside>

    <footer>Copyright (c) 2018 Copyright Holder All Rights Reserved.</footer>
</body>
</html>
